<template>
	<view class="content">
		<view class="title">
			<image style="width: 300upx; height: 180upx;" :src="imageUrl"></image>
			<view style="margin-left: 20upx;">
				<view>{{name}}</view>
				<view style="color: #666;">{{spesDesc}}</view>
				<view style="display: flex;justify-content: space-between;">
					<text>¥{{price}}</text>
					<text>x{{nums}}</text>
				</view>
			</view>
		</view>
		<view class="service">
			<text style="color: #999999;">服务类型:</text>
			<view style="display: flex;padding: 20upx 0;">
				<view class="option" :class="type === 1?'ischeck':''" @click="selectType(1)">仅退款</view>
				<view class="option" :class="type === 2?'ischeck':''" @click="selectType(2)">退货退款</view>
			</view>
			<text>申请数量</text><br />
			<view style="margin: 20upx 0;">
				<uni-number-box :min="0" :max="9"></uni-number-box>
			</view>
			<text>问题描述</text>
			<textarea class="area" v-model="reason"></textarea>
			<!-- <input class="input"  style="height: 200upx" v-model="reason"></input> -->
			<!-- <text>上传图片</text><br />
			<sunsin-upimg :upImgConfig='upImgConfig' @onUpImg="upImgData" /> -->
		</view>
		<view class="service">
			<view class="msg">
				<text class="txt" style="width: 150upx;"> 联系人：</text>
				<input class="input" v-model="linkman"></input>
			</view>
			<view class="msg">
				<text class="txt" style="width: 150upx;">联系电话：</text>
				<input class="input" v-model="tel"></input>
			</view>
			<view>
				<text class="txt">联系地址：</text>
				<textarea class="area" v-model="address"></textarea>
			</view>
		</view>
		<button type="primary" style="margin: 0 20upx 0 20upx;background: #D7000F;" @click="afterdetail()">提交</button>
	</view>
</template>
<script>
	import {
		get,
		post,
		showToast
	} from '../../../js/common';
	export default {
		data() {
			return {
				refund: '',
				userId: '',
				orderId: '',
				type: 1,
				reason: '',
				nums: '',
				linkman: '',
				tel: '',
				address: '',
				price: '',
				confirm: '',
				name: '',
				id: '',
				payed: '',
				images: [],
				spesDesc: '',
				orderItemId: '',
				upImgConfig: {
					count: 6,
				}
			}
		},
		onLoad(option) {
			this.orderId = option.orderId
			this.price = option.price
			this.nums = option.nums
			this.name = option.name
			this.payed = option.payed
			this.imageUrl = option.imageUrl
			this.spesDesc = option.spesDesc
			this.id = option.id
		},
		methods: {
			afterdetail() {
			
				if (this.linkman == '' || this.linkman == undefined) {
					uni.showToast({
						title: '联系人不能为空',
						icon: 'none'
					});
					return;
				}
				if (this.tel == '') {
					uni.showToast({
						title: '手机号码不能为空',
						icon: 'none'
					});
					return;
				}
				try {
					this.userId = uni.getStorageSync('userId')
					const params = {
						userId: this.userId,
						orderId: this.orderId,
						type: this.type,
						reason: this.reason,
						images: this.images,
						nums: this.nums,
						linkman: this.linkman,
						tel: this.tel,
						address: this.address,
						orderItemId: this.id,
						address: this.address
					}
					post('/mobileapi/mobile/aftersale/submitAftersalesOrder', params).then(res => {
						console.log('售后',res)
						if (res.code == 0) {
							uni.navigateTo({
								url: '/pages/aftersale/after-select/index'
							})
						} else{
							showToast(res.msg)
						}
					})
				} catch (e) {}
			},
			selectType(val) {
				this.type = val
			},
			upImgData(e) {
				if(e.length>5){
					uni.showToast({
						title:'最多上传5张图片'
					})
					return false
				}
				this.images = e.path
			}
		}
	}
</script>
<style>
	.content {
		font-size: 30upx;
	}

	.title {
		display: flex;
		background: #ffffff;
		margin-top: 20upx;
		padding: 20upx;
	}

	.tep:hover {
		border: 2upx solid #D7000F;
	}

	.nums {
		font-size: 30upx;
		background: #ffffff;
		margin-top: 20upx;
		padding: 20upx;
	}

	.service {
		margin-top: 20upx;
		padding: 20upx;
		background: #ffffff;
	}

	.pictures {
		margin-top: 20upx;
		background: #ffffff;
		font-size: 30upx;
		padding-top: 20upx;
	}

	.msg {
		display: flex;
		margin-top: 20upx;
	}

	.option {
		border: solid 1px #999;
		padding: 20upx;
		font-size: 30upx;
		margin-right: 20px;
	}

	.ischeck {
		border: solid 1px #D7000F;
		color: #D7000F;
	}

	.txt {
		line-height: 60upx;
	}

	.input {
		padding: 0 20upx;
		flex: 1;
	}

	.area {
		flex: 1;
		padding: 20upx;
		height: 140upx;
		border: 2upx solid #E6E6E6;
		margin: 20upx 0;
	}
</style>
